<template>
  <div class="case-show">
    <el-row>
      <el-col :span="5">
        <group v-on:listenTochildEvent="getApi"></group>
      </el-col>

      <el-col :span="19">
        <div class="case-title">
          <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 8px;margin-right: 8px">
            <!--预览-->
            <el-tab-pane label="预览" name="first">
              <h3 class="case-title-1">接口信息</h3>
              <div>
                <el-form ref="form" :inline="true" label-width="120px" label-position="left">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="接口编号：">
                        <span>{{interfaceForm.id}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="16">
                      <el-form-item label="接口名称：">
                        <span>{{interfaceForm.name}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="添加人员：">
                        <span>{{interfaceForm.author}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="16">
                      <el-form-item label="更新时间：">
                        <span>{{interfaceForm.updateTime | format}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="接口路径：">
                        <el-tag v-if="interfaceForm.method =='GET'" size="medium" type="primary">GET</el-tag>
                        <el-tag v-else-if="interfaceForm.method =='POST'" size="medium" type="success">POST</el-tag>
                        <el-tag v-else-if="interfaceForm.method =='PUT'" size="medium" type="warning">PUT</el-tag>
                        <el-tag v-else-if="interfaceForm.method =='DELETE'" size="medium" type="danger">DELETE</el-tag>
                        <span style="color: #353535;letter-spacing: 1px;">{{interfaceForm.path}}</span>
                        <el-tooltip class="item" effect="dark" content="复制接口路径" placement="top-start">
                          <i style="padding-left:10px" class="el-icon-document-copy" @click="copy(interfaceForm.path)"></i>
                        </el-tooltip>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="接口描述：" style="width: 330px">
                        <span style="color: #353535">{{interfaceForm.message}}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>

              <h3 class="case-title-1">接口用例</h3>
              <div class="case-info-request">
                <div style="float: right;margin-bottom: 0.3rem">
                  <el-button type="primary" @click="executeCase('','','',1,interfaceForm.id,'')" icon="el-icon-caret-right" size="mini">一键执行</el-button>
                  <router-link :to="{  name:'接口测试用例'}">
                    <el-button type="warning" icon="el-icon-arrow-left" size="mini" style="margin-left: 1px;">返回列表</el-button>
                  </router-link>
                </div>
                <el-table :data="interfaceCaseList.list" border :stripe="true" :header-cell-style="{'background-color':'#f2f2f2','font-weight':'400','color':'#272626','heigth':'39px'}">
                  <el-table-column prop="id" min-width="80" fixed="left" sortable label="编号"></el-table-column>
                  <el-table-column prop="name" min-width="170" sortable label="用例名"></el-table-column>
                  <el-table-column min-width="250" sortable label="请求参数">
                    <template slot-scope="scope">
                      <pre contenteditable="true" class="case-pre" v-html="syntaxHighlightCase(scope.row.params)"></pre>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="250" sortable label="预期结果">
                    <template slot-scope="scope">
                      <pre contenteditable="true" class="case-pre" v-html="syntaxHighlightCase(scope.row.expectedResult)"></pre>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="250" sortable label="前置处理">
                    <template slot-scope="scope">
                      <pre contenteditable="true" class="case-pre" v-html="syntaxHighlightCase(scope.row.preProcessing)"></pre>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="250" sortable label="后置处理">
                    <template slot-scope="scope">
                      <pre contenteditable="true" class="case-pre" v-html="syntaxHighlightCase(scope.row.postProcessing)"></pre>
                    </template>
                  </el-table-column>
                  <el-table-column prop="id" label="Header" sortable min-width="250">
                    <template slot-scope="scope">
                      <pre style="height: 70px; font-size: 12px" class="case-pre" contenteditable="true" v-html="syntaxHighlightCase(scope.row.headers)"></pre>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="180" sortable label="更新时间">
                    <template slot-scope="scope"><i class="el-icon-time" style="margin-right: 5px"></i>{{scope.row.updateTime | format}}</template>
                  </el-table-column>
                  <el-table-column min-width="120" label="操作" fixed="right">
                    <template slot-scope="scope">
                      <el-button type="text" class="case-manager-button" @click="editCase(scope.row.id)" style="color: green">修改</el-button>
                      <el-button type="text" class="case-manager-button" @click="deletInterfaceCase(scope.row.id)" style="color: red">删除</el-button>
                      <el-button type="text" class="case-manager-button" @click="executeCase('','','',0,'',scope.row.id)">执行</el-button>
                      <el-button type="text" class="case-manager-button" style="color: #a213bb">
                        <!-- <caseExectedLog :caseId="scope.row.id"></caseExectedLog> -->
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

            </el-tab-pane>

            <el-tab-pane label="添加/编辑" name="two">
              <caseEdit ref="caseEdit" v-on:getApi="getApi" v-on:getInterfaceCase="getInterfaceCase"></caseEdit>
            </el-tab-pane>

          </el-tabs>

        </div>

      </el-col>

    </el-row>

  </div>
</template>


<script>
import group from '../group/groupManager'
import caseEdit from '../case/caseEdit'
import { addApi, getApi, deleteApi, updateApi } from '@/api/api'
import { syntaxHighlight } from '@/utils/baseUtil'
import { formatDate } from "@/utils/dataUtil";
import { addCase, getCase, deleteCase, updateCase } from '@/api/case'
export default {

  data () {
    return {

      activeName: 'first',


      //接口提交表单
      interfaceForm: {
        projectId: "",
        groupId: "",
        interfaceId: "",
        commonParams: [],
        params: [],
        headers: [],
        author: ""
      },

      //接口用例列表
      interfaceCaseList: {
        list: [],
        count: 0,
        param: {
          pageIndex: 1
        }
      },

      interfaceGroup: {
        list: []
      },

    }
  },

  components: {
    group,
    caseEdit
  },
  methods: {
    //获取接口信息
    getApi (projectId, apiGroupId, id, pageIndex, pageSize) {
      getApi(projectId, apiGroupId, id, pageIndex, pageSize).then(resp => {
        if (resp.code == 200) {
          this.interfaceForm = resp.data.records[0]
          this.interfaceForm.params = isNull(resp.data.records[0]["params"]) ? [] : JSON.parse(resp.data.records[0]["params"]);
          this.interfaceForm.commonParams = isNull(resp.data.records[0]["commonParams"]) ? [] : JSON.parse(resp.data.records[0]["commonParams"]);
          this.interfaceForm.headers = isNull(resp.data.records[0]["headers"]) ? [] : JSON.parse(resp.data.records[0]["headers"]);
          this.interfaceForm.cookies = isEmpty(resp.data.records[0]["cookies"]) ? [] : JSON.parse(resp.data.records[0]["cookies"]);

          this.json.successJson = isNull(resp.data.records[0]["response"]) ? {} : JSON.parse(resp.data.records[0]["response"]);
          this.$store.commit('SET_INTERFACEINFO', this.interfaceForm)
        }
      })
    },

    //获取接口下用例
    getInterfaceCase (interfaceId, pageIndex) {
      getCase(interfaceId, '', pageIndex, 100).then(resp => {
        this.interfaceCaseList.list = resp.data.records;
        this.interfaceCaseList.param.pageIndex = parseInt(pageIndex);

      })

    },

    //删除用例
    deletInterfaceCase (id) {
      this.$confirm("此操作将永久删除该用例「" + id + "」, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteCase(id).then(resp => {
          if (resp.code == 200) {
            this.$message({
              message: resp.message,
              type: 'success',
            });
            this.getInterfaceCase(this.interfaceForm.id, 1);
          }
        })
      });


    },

    //修改用例
    editCase (caseId) {
      this.activeName = "two"
    },

    //执行用例
    executeCase (projectId, groupId, envId, taskId, interfaceId, caseId) {

    },

    syntaxHighlightCase (jsonString) {
      try {
        let obj = JSON.parse(jsonString);
        return syntaxHighlight(JSON.stringify(obj, undefined, 2));
        // return JSON.stringify(obj, null, 2);
      } catch (ex) {
        return jsonString;
      }
    },


    handleClick () {
    }
  },

  watch: {
    //当interfaceGroup中点击时
    interfaceForm (val, oldVal) {
      //更新子组件数据
      this.getInterfaceCase(this.interfaceForm.id, 1);
    },
  },

  filters: {
    format (time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    }
  },


  mounted () {
    //查询项目下所有接口
    this.interfaceForm.interfaceId = this.$route.params.interface_id;
    console.log(this.$route.params)
    console.log(this.$route.params.interface_id)
    this.getApi('', '', this.interfaceForm.interfaceId, 1, 30);

    //获取接口分组
    this.interfaceGroup.list = this.$store.state.interfaceGroup;
    console.log(this.interfaceGroup.list)

    // this.json1 = this.$syntaxHighlight(JSON.stringify(this.json));


  },




}
</script>

<style scoped>
.case-show {
  height: 100%;
}

.case-show >>> .el-row {
  height: 100%;
  margin-bottom: 5px;
}

.case-show >>> .el-col {
  height: 100%;
}

.case-show .case-title {
  margin-left: 1px;
  background-color: #fff;
  height: 100%;
  margin-top: 2px;
}

.case-title-1 {
  clear: both;
  font-weight: 400;
  margin-top: 0.4rem;
  border-left: 3px solid #2395f1;
  padding-left: 8px;
  display: inline-block;
}

.case-info-request .el-table th {
  padding: 7px 0;
}

.case-info-request .el-table__row td {
  padding: 7px 0;
}

.case-manager-button {
  margin-left: 1px !important;
  padding: 10px 3px;
}

pre {
  display: block;
  padding: 1px;
  margin: 0 0 1px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: auto;
  height: 80px;
  white-space: pre-wrap;
  font-family: Consolas, Menlo, Courier, monospace;
}

.case-show >>> .string {
  color: green;
}

.case-show >>> .number {
  color: darkorange;
}

.case-show >>> .boolean {
  color: blue;
}

.case-show >>> .null {
  color: magenta;
}

.case-show >>> .key {
  color: red;
}
</style>
